<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>更换手机</title>
	<link rel="stylesheet" href="../css/common.css">
	<style>
		.binding{
			padding: 0 1rem;
		}
		.title{
			margin: 4rem 0;
			font-size: 1.125rem;
			font-weight: bold;
		}
		.writePhone{
			padding: 0.625rem 0;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #F5F5F5;
		}
		.writePhone:hover{
			border-bottom: 1px solid #2F78FF;
		}
		.writePhone input{
			width: 100%;
			height: 1.875rem;
			font-size: 0.9375rem;
			line-height: 1.875rem;
		}
		.getCode{
			color: #2F78FF;
			font-size: 0.875rem;
			width: 7.5rem;
			text-align: center;
			background: transparent;
			border: none;
			outline: none;
		}
		.loginBtn{
			width: 80%;
			margin: 1rem auto;
			height: 2.5rem;
			line-height: 2.5rem;
			background-color: #2F78FF;
			border-radius: 0.25rem;
			color: #fff;
			font-size: 1rem;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="tabsBox">
		<div class="topTab">
			<div class="tabLeft">
				<img src="../assets/left_J.png" >
			</div>
			<div class="tabCenters">手机号码更换</div>
			<!-- <div class="tabRight">收益说明</div> -->
		</div>
	</div>
	<div class="binding">
		<div class="title">您正在更换的手机号为188****8766</div>
		<div class="writePhone">
			<input type="number" placeholder="请输入验证码">
			<button class="getCode">获取验证码</button>
		</div>
		<div class="loginBtn">
			<a href="../html/recharge_phone.html" style="color: #fff;">下一步</a>
		</div>
	</div>
</body>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
	$(function(){
		var val = true
		$('.getCode').click(function(){
			if(val){
				val = false
				let count = 5;
				let countDown = setInterval(() => {
					if(count === 0) {
						$('.getCode').text('重新发送').removeAttr('disabled');
						clearInterval(countDown)
						val = true
					} else {
						$('.getCode').attr('disabled','true');
						$('.getCode').text(count + 's重新获取')
					}
					count--
				}, 1000)
			}
		})
	})
</script>
</html>